<template>
    <div class="sideBar flex fd-column h100">
        <user-info></user-info>
        <div class="search flex ai-center">
            <i class="iconfont icon-sousuo ml-xs mr-xs"></i>
            <div class="f1">
                <label>
                    <input
                            type="text"
                            placeholder="搜索"
                            @keyup="search"
                            v-model="searchStr"
                    >
                </label>
<!--                <img src="../../../assets/times.png" alt="">-->
            </div>
        </div>
        <div class="relative f1 flex fd-column overHidden">
            <div class="nav">
                <ul class="flex">
                    <li :class="{'active': navTri}" @click="changeNav('isMessage')">消息</li>
                    <li :class="{'active': !navTri}" @click="changeNav('isFriends')">好友</li>
                </ul>
            </div>
            <div class="sideBarContent f1">
                <div :class="sideBarShow" class="panelBox flex">
                    <message-panel class="message"></message-panel>
                    <friend-panel class="friend" :online="online"></friend-panel>
                </div>
            </div>
            <search-panel class="searchResult"
                          v-show="searchPanel"
                          :target="target"
            ></search-panel>
        </div>
    </div>
</template>

<script>
    import userInfo from './UserInfo';
    import searchPanel from './SearchPanel';
    import messagePanel from './MessagePanel';
    import friendPanel from './FriendPanel';

    export default {
        name: "SideBar",
        components: {
            'userInfo': userInfo,
            'searchPanel': searchPanel,
            'messagePanel': messagePanel,
            'friendPanel': friendPanel,
        },
        props: ['online'],
        data() {
            return {
                //搜索界面
                searchStr: '',
                searchPanel: false,

                navTri: true,

                target: null,

                sideBarShow: 'showMessage',
            }
        },
        methods: {
            async search(e) {
                if (!this.searchEnd && e.key === 'Enter') {
                    let {data: {user}} = await this.$http.get(`/main/searchUser/${this.searchStr}`);
                    this.target = user;
                    this.searchPanel = true;
                } else if (e.key === 'Backspace' && this.searchStr === '') {
                    this.searchPanel = false;
                }
            },

            changeNav(target) {
                if (target === 'isMessage') {
                    this.navTri = true;
                    this.sideBarShow = 'showMessage';
                } else {
                    this.navTri = false;
                    this.sideBarShow = 'showFriends';
                }
            },
        }
    }
</script>

<style scoped lang="scss">
    .sideBar {
        width: 320px;
        color: #999;
        background-color: rgb(51 53 58);
        overflow: hidden;
        flex-shrink: 0;

        .search {
            position: relative;
            height: 32px;
            background-color: #505155;
            flex-shrink: 0;

            div {
                height: 100%;
            }

            input {
                height: 100%;
                width: 100%;
                font-size: 15px;
                outline-style: none;
                border: 0;
                color: #ccc;
                background-color: transparent;
            }
        }

        .nav {
            display: flex;
            margin-bottom: 10px;

            ul {
                width: 100%;
                justify-content: space-around;
            }

            li {
                padding: 0 10px;
                height: 42px;
                line-height: 45px;
                text-align: center;
                font-size: 15px;
                cursor: pointer;

                &.active {
                    border-bottom: 3px solid #666;
                }
            }
        }

        .sideBarContent {
            width: 640px;
            flex-shrink: 1;
            overflow: hidden;

            .panelBox {
                transition: margin-left 0.3s;
                height: 100%;

                &.showMessage {
                    margin-left: 0;
                }

                &.showFriends {
                    margin-left: -320px;
                }

                .message,
                .friends {
                    width: 320px;
                }
            }
        }

        .searchResult {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #33353a;
        }
    }
</style>